<template>
	<div class="video-w">
		<basic-container style="height: calc(100% - 60px)">
			<div class="wrapper">
			  <!--<el-alert title="目前支持在局域网下实现快进功能,远程访问是没有快进功能的" type="warning" style="margin-bottom: 10px;"></el-alert>-->
				<div class="wrapper-inner">
					<el-row :gutter="10">
						<el-col :span="4" v-for="(item,index) in data" :key="item.id">
							<div class="container">
								<div class="top">
									<iframe :src="formatSrc(item)" width="100%" height="100%" allowfullscreen>
									</iframe>
								</div>
								<div class="bottom">
									<div class="infoWrap">
										<div class="info">设备名称:{{ item.name }}</div>
										<div class="info">所属项目:{{ item.deptName }}</div>
									</div>
									<div class="btn">
										<el-button size="mini" type="primary" @click="replay(item)">回放</el-button>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
			<el-dialog title="回放" :visible.sync="dialogVisible" width="45%" :append-to-body="true" :before-close="handleClose">
				<div>
					<el-date-picker v-model="dataTime" type="datetimerange" range-separator="至" value-format="yyyyMMddHHmmss" start-placeholder="开始日期" size="small" end-placeholder="结束日期">
					</el-date-picker>
					<el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 10px;" @click="search">查询</el-button>
				</div>
				<div class="iframe_wrap">
					<iframe v-if="showiframe" :src="iframeSrc" width="100%" height="100%" :id="id" allowfullscreen>
					</iframe>
				</div>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			  </span>
			</el-dialog>
		</basic-container>
	</div>
</template>

<script>
	import { getVideoSupervision } from "@/api/dust/videoEquipment";
	export default {
		data() {
			return {
				showiframe: false,
				dataTime: null,
				data: [],
				iframeSrc: '',
				videoList: [],
				dialogVisible: false,
				src: 'https://open.ys7.com/ezopen/h5/iframe',
				current: null
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			search() {
				if(!this.dataTime) {
					this.$message({
						showClose: true,
						message: '请选择时间范围',
						type: 'error'
					});
					return false
				}
				this.showiframe = true
				this.iframeSrc = this.src + '?url=' + this.current.playbackAddress + '?begin=' + this.dataTime[0] + '&end=' + this.dataTime[1] +
					'&autoplay=1' + '&accessToken=' + this.current.accessToken

			},
			replay(item) {
				this.dataTime = null
				this.iframeSrc = ''
				this.current = item
				this.dialogVisible = true
				this.showiframe = false
			},
			formatSrc(item) {
				let str1 = 'https://open.ys7.com/ezopen/h5/iframe?url='
				let str2 = item.streamAddress
				let str3 = '&autoplay=1'
				let str4 = '&accessToken=' + item.accessToken
				return str1 + str2 + str3 + str4
			},
			init() {
				getVideoSupervision().then(res => {
					this.data = res.data.data
				})
			}
		}
	}
</script>
<style>
	.video-w .el-card {
		background: #e5e5e5;
	}
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}
	
	.container {
		height: 260px;
		.top {
			height: 200px;
		}
		.bottom {
			align-items: center;
			display: flex;
			.infoWrap {
				flex: 1;
			}
			.btn {
				padding-right: 5px;
			}
			height: 60px;
			background: #fff;
			font-size: 14px;
			border-radius: 0 0 5px 5px;
			padding: 5px;
			.info {
				margin-bottom: 8px;
			}
		}
	}
	
	.iframe_wrap {
		width: 100%;
		height: 500px;
		margin-top: 10px;
		border: 1px solid #ccc
	}
</style>